<template>
  <div id="plat-prac">
    <div v-if="docs.length!=0" class="docs" v-for="(item,index) in docs">
      <div class="img">
        <img :src="require('../../../assets/img/word_logo.png')" alt="">
      </div>
      <div class="content">
        <h5 style="width: 30%">{{item.title}}</h5>
        <h5 style="float: right;margin-right: 30px">{{item.createTime|formatDate}}</h5>

        <a :href="url"><el-button @click="downDoc(item.id)" size="mini"><i class="el-icon-download"></i></el-button></a>
      </div>
    </div>
    <div v-else style="background:white;height: 500px;display: flex;justify-content: center;align-items: center">
      <h2>空空如也</h2>
    </div>
  </div>
</template>

<script>
import {getPractice} from "@/api/data";
import {baseUrl} from "@/api/baseUrl";

export default {
  name:'practice',
  data(){
    return{
      baseUrl:baseUrl,
      dialogVisible:false,
      url:'',
      docs:[
      ],
      fileList:[],
    }
  },
  created() {
    this.getData('')
  },
  methods:{
    getData(str){
      getPractice(str)
          .then(res=>{
            console.log(res)
            this.docs=res.data.extend.practiceMap[0]
            console.log(this.docs)
          })
    },
    downDoc(id){
      this.url=baseUrl+'/data/downloadPractice/'+id
    },

  }

}
</script>

<style scoped>
#plat-prac{
  box-shadow: -1px 1px 3px rgb(222,222,222);
  width: 100%;
  height: 100%;
  background: white;
}
h5{
  padding: 0;
  margin: 0;
}
.docs{
  cursor: pointer;
  width: 100%;
  height: 40px;
  transition: all .1s;
  border-bottom: 1px solid gainsboro;
}
.docs:hover{
  background-color: gainsboro;
}
.docs .img{
  float: left;
  height: 100%;
  width: 60px;
}
.docs img{
  height: 100%;
  width: 100%;
}
.content{
  float: left;
  height: 100%;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content h5{
  line-height: 40px;
}
</style>
